import React from 'react';
import {connect} from 'react-redux';
import Feedback from 'containers/feedback/feedback';
import html2canvas from 'html2canvas';

class FeedbackIcon extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      onlineServiceUrl:"",
      feedbackModalVisible: false,
      screenShotUrl: '', //屏幕截图url
    }
  }
  componentWillMount() {
    const { onRef } = this.props;
    onRef && onRef(this);
  }
  //截图反馈
  feedbackHandler = () => {
    //将当前html转换为canvas，然后获取url
    html2canvas(document.body, {allowTaint: true, logging: false})
      .then(canvas => {
        try { //有些浏览器不支持allowTaint:true（跨域获取图片），报错canvas被污染
          this.setState({
            screenShotUrl: canvas.toDataURL('image/jpeg', 1),
            feedbackModalVisible: true
          })
        } catch (e) {
          html2canvas(document.body, {allowTaint: false, logging: false})
            .then(newCanvas => {
              this.setState({
                screenShotUrl: newCanvas.toDataURL('image/jpeg', 1),
                feedbackModalVisible: true
              })
            }).catch(err => {
            console.log("html2canvas异常", err)
          });
          console.log("try-catch异常", e)
        }
      })
  };

  closeFeedback = () => {
    this.setState({feedbackModalVisible: false})
  };

  render() {
    const { feedbackModalVisible, screenShotUrl } = this.state;
    const {defaultIssueContent} = this.props;
    return (
      <div>
        {/*在线截图反馈*/}
        {
          feedbackModalVisible && (
          <Feedback screenUrl={screenShotUrl} onClose={this.closeFeedback} defaultIssueContent={defaultIssueContent}/>)
        }
      </div>
    )
  }
}

FeedbackIcon.propTypes = {
  collapsed: React.PropTypes.bool,
  defaultIssueContent: React.PropTypes.string,
};

FeedbackIcon.defaultProps = {
  defaultIssueContent: "",
};

FeedbackIcon.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    user: state.login.user,
  }
}

export default connect(mapStateToProps)(FeedbackIcon);

